بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش بیست و دوم

AngularJS Internalization

AngularJS از سه نوع مختلف فیلتر برای تاریخ، اعداد، واحد پول در خصوص internationalization پشتیبانی می کند. برای استفاده از این ویژگی کافی است فایل JS مورد نظر خود را برای استفاده از فرمت کشور مربوطه در صفحه قرار دهید. به صورت پیش فرض تنظیمات مرورگر شما برای نمایش اطلاعات مورد استفاده قرار می گیرد. برای مثال ما از فرمت کشور دانمارک در زیر استفاده کرده ایم.
 

<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> 

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش بیست و یکم

AngularJS Custom Directives

Custom directive ها برای افزایش کارایی صفحات HTML مورد استفاده قرار می گیرند. Custom directive به وسیله تابع "directive" تعریف می شوند. یک custom directive به سادگی عناصر مطابقت داده شده را جایگزین می کند. برنامه های AngularJS در زمان لود شدن و آماده شدن برای اجرا (bootstrap) عنصرهایی که تطابق با درخواست ما را دارند پیدا می کند و در زمان فعال شدن از متد ()compile استفاده می کند پس از این مرحله با استفاده از متد ()link مربوط به Custom directive بر اساس Scope رهنمود مربوطه را پردازش می کند.


AngularJS  برای ساخت custom directive از انواع زیر پشتیبانی می کند.

•    Element  هنگامی که با یک عنصر مطابقت داده شود، رهنمود فعال می شود.
•    Attribute هنگامی که با یک خاصیت مطابقت داده شود، رهنمود فعال می شود.
•    CSS هنگامی که با یک استایل CSS مطابقت داده شود، رهنمود فعال می شود.
•    Comment هنگامی که با یک comment  مطابقت داد شود، رهنمود فعال می شود.
 

درک کردن رهنمودهای Custom

تگ های HTML را بنویسید:

<student name="Mahesh"></student><br/>
<student name="Piyush"></student>

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش نوزدهم

AngularJS Services

AngularJS به وسیله معماری سرویس از مفهوم جدا سازی ارتباطات پشتیبانی می کند. سرویس ها توابع javascript ایی هستند که فقط برای پاسخ گویی به کارهای خاص مورد استفاده قرار می گیرند. این باعث می شود کارها به صورت

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش هجدهم

AngularJS Scopes

بخش دوم AngularJS Scopes

Scope  یک شی جاوا اسکریپتی است که وظیفه اتصال مابین View و کنترلرها را بر عهده دارد. Scope شامل مدل داده (model data) است. در کنترلر مدل داده از طریق شی scope$ مورد دسترسی قرار می گیرد.

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش هفدهم

AngularJS Views

AngularJS از قابلیت طراحی برنامه های تک صفحه (Single Page Application) با قابلیت استفاده از چندین View در یک صفحه پشتیبانی می کند. برای استفاده از این ویژگی AngularJS رهنمودهای ng-view  و  ng-templateرا به همراه سرویس routeProvider$ فراهم کرده است.

ng-view

تگ ng-view به سادگی یک place holder ایجاد می کند که بر اساس تنظیمات صورت گرفته View مورد نظر (html  یا  ng-template view) می تواند درون place holder ما قرار گیرد.

روش استفاده

یک Div با ng-view درون ماژول اصلی تعریف می کند.

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش شانزدهم

AngularJS Ajax

AngularJS با استفاده از سرویس http$ امکان خواندن اطلاعات را از سرور فراهم می کند. سرور شما می تواند یک دیتابیس برای خواندن اطلاعات ایجاد کند. AngularJS به داده ها در قالب JSON نیاز دارد و هنگامی که داده ها آماده باشند سرویس http$ می تواند از داده های سرور به صورت زیر استفاده کنند.

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش پانزدهم

AngularJS Includes

با AngularJS شما می توانید یک فایل HTML را درون یک فایل HTML دیگر لود کنید.

دستور HTML Includes در آینده HTML

متاسفانه لود کردن بخشی از HTML در یک فایل HTML دیگر هنوز توسط HTML پشتیبانی نمی شود.

HTML imports

HTML imports یک روش جدید است که در آینده برای نسخه های HTML مورد استفاده قرار خواهد گرفت.

<link rel="import" href="/path/navigation.html">

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش ششم

AngularJS XMLHttpRequest

خواندن یک فایل JSON

در زیر یک فایل JSON استاتیک وجود دارد که بر روی یک وب سرور قرارداده شده است.
 

[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش پنجم

AngularJS Filters

Filter ها می توانند به رهنمود ها و عبارت ها با استفاده از یک کاراکتر pipe ( | ) اضافه شوند.
فیلترهای AngularJS می توانند شکل داده ها را تغییر دهند:

 اضافه کردن Filter ها به Expression ها

در دو مثال بعدی ما از personController که در مقاله قبل از آن استفاده کردیم بهره می بریم.
فیلتر uppercase همانطور که از نام آن مشخص است فرمت رشته ها (string) به حروف بزرگ تغییر می دهد.

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش چهاردهم

AngularJS and Twitter Bootstrap

Twitter Bootstrap یک style sheet محبوب است در این بخش می خواهیم نحوه استفاده از Bootstrap در AngularJS را بررسی کنیم.
 

Bootstrap

برای اضافه کردن Twitter Bootstrap به پروژه AngularJS می بایست کد زیر را به <head> صفحه خود اضافه کنید.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

در بخش زیر یک مثال کامل از رهنمودهای AngularJS و کلاس های Bootstrap وجود دارد.